<!-- 商品详情页 -->
<template>
	<view class="body">
		<view class="DetailList">
			<p><img :src="datalist[indexs].imgSrc" alt=""></p>
			<p class="Detail_header">
				<span class="Detail_title">{{datalist[indexs].from}}</span>
				<span class="Detail_item">{{datalist[indexs].date}}</span>
			</p>
			<p class="Detail_text">{{datalist[indexs].title}}</p>
		</view>
	</view>
</template>

<script>
	const getlist = require('../../data/travelInfo.json')
	export default {
		data() {
			return {
				indexs: 0,
				datalist: ''
			}
		},
		onLoad(options) {
			// 获取商品id
			const id = options.id - 1;
			this.indexs = id
		},
		mounted() {
			//获取数据
			console.log(getlist);
			this.datalist = getlist;
		}
	};
</script>
<style lang="scss">
	.body{
		width: 100%;
		height: 1200rpx;
		background-image: url('../../static/image/back.jpg');
		background-size: cover;
		
		.DetailList {
		
			.Detail_header{
				margin-top: 12rpx;
				.Detail_title {
					// display: inline-block;
					font-size: 42rpx;
					margin-left: 20rpx;
					color: orange;
				}
				
				.Detail_item {
					color: #09f;
					// display: inline-block;
					font-size: 36rpx;
					margin-left: 340rpx;
				}
			}
			.Detail_text {
				margin-top: 12rpx;
				font-size: 32rpx;
				
			}
			
		}
		
		img {
			width: 100%;
		
		}
	}
	
</style>
